<template>
  <div class="reply-list">
    <ul style="padding: 0px">
      <li
        v-for="item in replyInfo.list"
        :key="item.id"
        style="list-style: none"
      >
        <reply-item
          @create-son-reply-send="createSonReplySend"
          :reply-info="item"
        ></reply-item>
      </li>
    </ul>
    <el-pagination
      layout="total,prev, pager, next"
      :total="replyInfo.total"
      :page-size="4"
      @current-change="pageChange"
      :hide-on-single-page="singlePage"
      class="pagination"
    >
    </el-pagination>
    <reply-editor
      v-if="showSon"
      :be-reply-user="beRepliedUser"
      :cid="cid"
      @reload-reply="reloadReply"
    ></reply-editor>
  </div>
</template>

<script>
import { api } from "@/api";
import ReplyItem from "./ReplyItem.vue";
import ReplyEditor from "./editor/ReplyEditor.vue";
export default {
  components: { ReplyItem, ReplyEditor },
  data() {
    return {
      replyInfo: {
        list: [],
        total: 0,
      },
      beRepliedUser: "",
      showSon: false,
    };
  },
  props: ["cid"],
  methods: {
    pageChange(page) {
      this.loadReplyInfo(null, null, page);
    },
    reloadReply() {
      this.loadReplyInfo(null, null, 1);
    },
    async loadReplyInfo(cid = null, uid = null, page = 1) {
      if (this.cid) {
        cid = this.cid;
      }
      if (this.$route.query.aid) {
        // 用户id
        uid = this.$route.query.aid;
      }
      try {
        this.replyInfo = (
          await this.$axios(api.comment.getReplyList(cid, uid, page))
        ).data;
      } catch (error) {
        console.log(error);
        if (error.response) {
          this.$alert(error.response.data.message);
        } else {
          this.$alert("网络错误");
        }
      }
    },
    createSonReplySend(username) {
      this.beRepliedUser = username;
      this.showSon = true;
      this.$emit("show-son-input");
    },
  },
  computed: {
    singlePage() {
      // eslint-disable-next-line prettier/prettier
      return this.replyInfo.total > 4 ? false : true;
    },
  },
  mounted() {
    this.loadReplyInfo();
  },
};
</script>

<style lang="less" scoped></style>
